<template>
  <el-dialog
    v-model="dialogVisible"
    :title="(isEdit ? '修改' : '新增') + '仓库'"
    width="600"
  >
    <el-form
      ref="formRef"
      :model="form"
      label-width="auto"
      label-position="right"
      class="demo-form-inline"
      :rules="formRules"
      status-icon
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请输入联系方式"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="占地面积" prop="area">
            <el-input
              v-model="form.area"
              placeholder="请输入占地面积"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓容定额" prop="capacity">
            <el-input
              v-model="form.capacity"
              placeholder="请输入仓容定额"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="负责人" prop="chargeId">
            <el-select
              v-model="form.chargeId"
              filterable
              placeholder="请选择负责人"
              clearable
            >
              <el-option
                v-for="item in chargeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址" prop="address">
            <el-input
              v-model="form.address"
              placeholder="请输入仓库地址"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              placeholder="请输入备注"
              type="textarea"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="submit">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import { formRules } from "./rules.js";
import { addStash, setStash } from "@/api/stash.ts";
import { getCharge } from "@/api/charge.ts";

const dialogVisible = ref(false);

const form = ref({
  name: "",
  phone: null,
  area: null,
  chargeId: null,
  capacity: null,
  address: null,
  remark: null
});
const isEdit = ref();
const formRef = ref();
const chargeOptions = ref();

onMounted(() => {
  getChargeOptions();
});

const getChargeOptions = async () => {
  const res = await getCharge({
    pageSize: 200
  });
  chargeOptions.value = res.items.map(item => {
    return {
      label: item.name,
      value: item.id
    };
  });
};

const submit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (isEdit.value) {
        await setStash({
          ...form.value
        });
      } else {
        await addStash({
          ...form.value
        });
      }
      closeDialog();
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 打开对话框
const openDialog = async (row = undefined) => {
  dialogVisible.value = true;
  await nextTick();
  formRef.value.resetFields();
  isEdit.value = row ? true : false;
  if (row) {
    form.value = {
      id: row.id,
      name: row.name,
      chargeId: row.charge_id,
      address: row.address,
      area: row.area,
      phone: row.phone,
      capacity: row.capacity,
      remark: row.remark
    };
  }
};

const emits = defineEmits(["closeDialogEvent"]);
const closeDialog = () => {
  dialogVisible.value = false;
  emits("closeDialogEvent");
};

defineExpose({
  openDialog
});
</script>

<style lang="less" scoped></style>
